<!-- 弹窗组件 Dialog.vue -->
<template>
  <el-dialog
    v-model="dialogVisible"
    class="dialog-wrap"
    :title="title"
    :width="width"
    :top="top"
    :close-on-click-modal="clickModalClose"
    :fullscreen="isFullScreen"
    :modal-append-to-body="modalAppendToBody"
    :show-close="false"
    :append-to-body="appendToBody"
    @close="closeDialog"
    @open="openDialog"
  >
    <template #header>
      <div class="dialog-header-title">
        <span>{{ title }}</span>
        <el-icon
        class="el-icon-full-screen"
          :size="20"
          v-if="!$attrs['screen-hidden']"
          @click="handleFullScreenClick"
        >
          <FullScreen />
        </el-icon>
      </div>
      <!-- :style="{'--themecolor':$store.getters.theme}" -->
    </template>
    <div>
      <slot />
    </div>
    <template v-if="!footerSlot" #footer >
      <div class="dialog-footer">
        <el-button
          v-show="!$attrs['cancel-hidden']"
          class="cancalBtn"
          size="small"
          @click="dialogVisible = false"
        >
          取 消
        </el-button>
        <el-button
          v-show="!$attrs['confirm-hidden']"
          type="primary"
          size="small"
          :loading="isLoading"
          class="comfirmBtn"
          @click="comfirmBtn"
        >
          {{ comfirmLabel }}
        </el-button>
      </div>
    </template>
      <template v-else #footer>

      </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 弹窗组件 Dialog.vue -> props参数 与事件
/**
 * param -> 参数
 *** @param title {String} - 左上侧的标题
 *** @param width {String} - 弹窗的宽度 默认800px 支持 px与%
 *** @param top {String} - 弹窗距离顶部位置 默认15vh
 *** @param visible {Boolean} - 弹窗显示与隐藏 默认false
 *** @param footerSlot {Boolean} - 弹窗的底部是否是呀slot 默认false
 *** @param clickModalClose {Boolean} - 弹窗是否支持点击遮罩层关闭弹窗 默认true
 *** @param modalAppendToBody {Boolean} - 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
 *** @param appendToBody {Boolean} - Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
 * $attr -> 参数
 *** @param 'footer-hidden' {Boolean} - footer是否隐藏 默认不存在
 *** @param 'screen-hidden' {Boolean} - screen-icon是否隐藏 默认不存在
 *** @param 'cancel-hidden' {Boolean} - 取消是否隐藏 默认不存在
 *** @param 'confirm-hidden' {Boolean} - 确认是否隐藏 默认不存在
 * event -> 事件
 *** @event changeDialog {Fun}} - 关闭事件
 *** @event comfirmBtn {Fun}} - 保存事件
	    <Dialog
      	@changeDialog="changeDialog2"
				@changeDialog="changeDialog"
    	>
 */
import {  reactive, computed, toRefs } from 'vue';
// import { useSettingsStore } from '@/framework/store/modules/settings';
import { FullScreen } from '@element-plus/icons-vue';
let props = defineProps({
  title: {
    type: String,
    default: '新增'
  },
  width: {
    type: String,
    default: '800px'
  },
  comfirmLabel: {
    type: String,
    default: '保 存'
  },
  top: {
    type: String,
    default: '15vh'
  },
  visible: {
    type: Boolean,
    default: false
  },
  footerSlot: {
    type: Boolean,
    default: false
  },
  clickModalClose: {
    type: Boolean,
    default: false
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  modalAppendToBody: {
    type: Boolean,
    default: true
  },
  appendToBody: {
    type: Boolean,
    default: false
  }
});
// const settingsStore = useSettingsStore();

const state = reactive({
  dialogVisible : false as any,
  isFullScreen: false
});
const { dialogVisible, isFullScreen } = toRefs(state);

let emits = defineEmits([
  'update:visible',
  'closeDialog',
  'openDialog',
  'comfirmBtn'
]);

// const showSettings = computed(() => settingsStore.showSettings);
state.dialogVisible=computed({
      get(){
        return props.visible
      },
      set(value){
        emits('update:visible',value);
 
      }
    })
// 关闭dialog回调
function closeDialog() {
  emits('closeDialog');
}
function openDialog() {
  emits('openDialog');
}
function comfirmBtn() {
  emits('comfirmBtn');
}
function handleFullScreenClick() {
  isFullScreen.value = !isFullScreen.value;
}
</script>
<style lang="scss" scoped>
.dialog-wrap {
  ::v-deep(.el-dialog) {
    margin-bottom: 10vh;
  }
}
.dialog-header-title {
  position: relative;
  .el-icon-full-screen {
    position: absolute;
    right: 4px;
    top: 3px;
    cursor: pointer;
    height: 16px;
    width: 16px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
